<template>
    <v3-table :columns="columns" :data="data" :columnSlotIdx="[3,6]" :isAlone="true">
        <template #tableColumn>
            <el-table-column label="table1" width="180" align="center" #default="{ row }">
                {{ row.agree }}
            </el-table-column>
            <el-table-column label="table2" width="180" align="center" #default="{ row }">
                {{ row.name }}
            </el-table-column>
        </template>
    </v3-table>
</template>
<script setup>
import member from './config'
// import asyncSelect from '../components/widget/asyncSelect.vue'
// import fileUpload from '../components/widget/fileUpload.vue'
// import imgUpload from '../components/widget/imgUpload.vue'
// import selectTree from '../components/widget/selectTree.vue'
// import datePicker from '../components/widget/datePicker.vue'
import v3Table from '../components/widget/v3Table.vue'

const handleFetch = (obj) => {
    console.log('handleFetch---', obj)
}
const handleEvent = (obj) => {
    console.log('handleEvent---', obj)
}
const handle = (obj, row) => {
    console.log('handle---', obj, row)
}
const columns = [
    {
        "label": "用户名称",
        "prop": "name"
    },
    {
        "label": "手机号码",
        "prop": "phone",
        "config": {
            "tableLogic": "obj?.phone == '3' # rowClass('p-1')"
        },
        "logic": "obj?.phone == '3'",
        "rowClass": "p-1"
    },
    {
        "label": "状态",
        "prop": "status",
        "config": {
            "enums": {
                "active": "激活",
                "inactive": "禁用",
                "blocked": "锁定"
            }
        }
    },
    {
        "label": "邮箱",
        "prop": "email"
    },
    {
        "label": "地址",
        "prop": "address"
    },
    {
        "label": "创建时间",
        "prop": "createdAt",
        "auxFunc": "dateFormatter2YMDHMS"
    },
    {
        "label": "修改时间",
        "prop": "updatedAt",
        "auxFunc": "dateFormatter2YMDHMS"
    },
    {
        "label": "操作",
        "operations": [
            {
                "label": "编辑",
                "method": (obj, row) => {handle(obj, row)},
                "className": "edit"
            },
            {
                "label": "删除",
                "method": (obj, row) => {handle(obj, row)},
                "className": "delete"
            }
        ]
    }
]
const data = [
    {
        "status": 'active',
        "name": "张三",
        "email": 18,
        'agree': true,
        "sex": "男",
        "address": "我是张三"
    },
    {
        "status": 'active',
        "name": "李四",
        "age": 20,
        "sex": "女",
        "address": "我是李四"
    }
]
</script>
<style>
.p-1{
    background-color: bisque;
}

.p-3 {
    background-color: aquamarine;
}
.normal{
    color: green;font-size: 14px;
}
.danger{
    color: red;font-size: 16px;
}
</style>
